body {
  background-color: tan;
  color: black;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

/* Pantallas de 992px o menos */
@media screen and (max-width: 992px) {
  body {
    background-color: rgb(106, 106, 231);
    color: white;
  }
}

/* Pantallas de 600px o menos */
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
    color: white;
  }
}

/* Aplicar box-sizing a todos los elementos */
* {
  box-sizing: border-box;
}

/* Estilos para la barra de navegación */
.barra-navegacion {
  overflow: hidden;
  background-color: #333;
}

/* Estilos para los enlaces del menú */
.barra-navegacion a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Cambio de color al pasar el mouse */
.barra-navegacion a:hover {
  background-color: #ddd;
  color: black;
}

/* Estilos responsivos: menú vertical en pantallas pequeñas */
@media screen and (max-width: 600px) {
  .barra-navegacion a {
    float: none;
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
}

.fila::after {
  content: "";
  display: table;
  clear: both;
}

.columna {
  float: left;
  width: 25%;
  padding: 20px;
  color: #000;
}

.columna-1 { background-color: #aaa; }
.columna-2 { background-color: #bbb; }
.columna-3 { background-color: #ccc; }
.columna-4 { background-color: #ddd; }

/* Responsivo: 4 columnas → 2 columnas en pantallas ≤ 992px */
@media screen and (max-width: 992px) {
  .columna {
    width: 50%;
  }
}

/* Responsivo: columnas apiladas en pantallas ≤ 600px */
@media screen and (max-width: 600px) {
  .columna {
    width: 100%;
  }
}

.bloque-ejemplo {
  background-color: yellow;
  padding: 20px;
}

/* Ocultar el bloque en pantallas de 600px o menos */
@media screen and (max-width: 600px) {
  .bloque-ejemplo {
    display: none;
  }
}


.caja-ejemplo {
  background-color: lightgrey;
  padding: 20px;
}

/* Tamaño de fuente para pantallas mayores a 600px */
@media screen and (min-width: 601px) {
  .caja-ejemplo {
    font-size: 80px;
  }
}

/* Tamaño de fuente para pantallas de 600px o menos */
@media screen and (max-width: 600px) {
  .caja-ejemplo {
    font-size: 30px;
  }
}